<template>
	<page-meta>
	    <navigation-bar
			title="报警数据分析"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view style="height: calc(100% - 30px);">
		<view >
			<uni-section title="车站故障统计" type="line"></uni-section>
			<view class="stationFaultTable">
				<z-table
					:tableData="stationFaultList" 
					:columns="stationFaultTableColumns" 
					:textAlign="'center'" 
					:titleTextAlign="'center'"></z-table>
			</view>
		</view>
		<uni-section title="重要设备故障统计TOP10" type="line"></uni-section>
		<echarts :option="maintainOption" style="height: 300px;" ></echarts>
		<uni-section title="各专业故障统计" type="line"></uni-section>
		<echarts :option="majorOption" style="height: 300px;" ></echarts>
		<uni-section title="各级别故障统计" type="line"></uni-section>
		<echarts :option="levelOption" style="height: 300px;" ></echarts>
		<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
			<view class="text">
				<uni-section title="实时报警" type="line"></uni-section>
			</view>
			<view class="queryButton">
				<button @click="showQueryOptions" type="primary" size="mini">查询</button>
			</view>
		</view>
	    <uni-drawer ref="queryOptions" :width="300" @change="drawerChange">
	        <view style="padding:30rpx;">
	    		<view style="padding-bottom: 10px">
	    			<form @submit="queryFormSubmit">
						<view class="">
							<label class="uni-label">车站名:</label>
							<view class="layui-input-block">
								<xfl-select
									:list="stationNameList"
									:clearable="true"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="false"  
									:style_Container="'height: 50px; font-size: 16px;'"
									:initValue="''"
									:option="optionConf"
									@change="stationNameChange($event)"
									@clear="stationNameChange($event)"
									:selectHideType="'hideAll'"></xfl-select>
							</view>
						</view>
	    				<view class="">
	    					<label class="uni-label">系统名:</label>
	    					<xfl-select
	    						:list="systemNameList"
	    						:clearable="true"
	    						:showItemNum="5" 
	    						:listShow="false"
	    						:isCanInput="false"  
	    						:style_Container="'height: 50px; font-size: 16px;'"
	    						:initValue="''"
	    						:option="optionConf"
	    						@change="systemNameChange($event)"
								@clear="systemNameChange($event)"
	    						placeholder="请先选择专业"
	    						:selectHideType="'hideAll'"></xfl-select>
	    				</view>
	    				<view class="">
	    					<label class="uni-label">优先级:</label>
	    					<xfl-select
	    						:list="levelList"
	    						:clearable="true"
	    						:showItemNum="5" 
	    						:listShow="false"
	    						:isCanInput="false"  
	    						:style_Container="'height: 50px; font-size: 16px;'"
	    						:initValue="''"
	    						:option="optionConf"
	    						@change="levelChange($event)"
								@clear="levelChange($event)"
	    						placeholder="请先选择系统"
	    						:selectHideType="'hideAll'"></xfl-select>
	    				</view>
	    				<view class="">
	    					<label class="uni-label">开始时间</label>
	    					<input 
	    						name="startDate"
	    						ref="startDate" 
	    						:value="queryParam.startDate" 
	    						placeholder="请选择开始时间" 
	    						autocomplete="off" 
	    						class="uni-input"
	    						@click="showPop($event, 'startDate')"
	    						disabled >
	    				</view>
	    				<view class="">
	    					<label class="uni-label">结束时间</label>
	    					<view class="layui-input-inline">
	    						<i class="layui-icon layui-icon-date"></i>
	    						<input 
	    							name="endtDate"
	    							ref="endtDate" 
	    							:value="queryParam.endDate" 
	    							placeholder="请选择结束时间" 
	    							autocomplete="off" 
	    							class="uni-input"
	    							@click="showPop($event, 'endDate')"
	    							disabled>
	    					</view>
	    				</view>
	    				<view class="">
	    					<button form-type="submit">
	    						<uni-icons type="search" ></uni-icons>
	    						查询
	    					</button>
	    				</view>
	    			</form>
	    		</view>
	        </view>
	    	<minPopup heightSize="500" :show="show" @close='close'>
	    		<minPicker 
	    			:endTime="endTime" 
	    			:startTime="startTimes" 
	    			@cancel="cancel" 
	    			@sure="sure"></minPicker>
	    	</minPopup>
	    </uni-drawer>
		<z-table
			:tableData="realTimeAlertList" 
			:columns="realTimeAlertTableColumns" 
			:textAlign="'center'" 
			:titleTextAlign="'center'"></z-table>
		<uni-pagination title="标题文字" :total="realTimeAlertTotal" @change="pageChange"></uni-pagination>
	</view>
</template>

<script>

import {maintainOption, majorOption, levelOption} from '@/static/js/analysisOfAlarmDataOptions.js'
import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import xflSelect from '@/components/xfl-select/xfl-select.vue'
import zTable from "@/components/z-table/z-table.vue"
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
import uniIcons from "@/components/uni-icons/uni-icons.vue"
import uniFab from '@/components/uni-fab/uni-fab.vue'
import Echarts from '@/components/echarts/echarts.vue'
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'

export default {
	name: 'comprehensiveInfo',
	data () {
		return {
			stationNameList: [],
			systemNameList: [],
			priorityList: [],
			levelList: [],
			stationFaultList: [],
			realTimeAlertList: [],
			maintainOption: {},
			majorOption: {},
			levelOption: {},
			startTimes:[2010,6,1],
			endTime: 2100,
			show:false,
			realTimeAlertTotal: 0,
			queryParam: {
				alarmStation: "",
				alarmSystem: "",
				endDate: "",
				pageNo: 1,
				pageSize: 15,
				rank: "",
				startDate: "",
			},
			optionConf: {
				label: 'label',
				value: 'value'
			},
			stationFaultTableColumns: [
				{
					title: '序号',
					key: 'id',
					width: 100
				},
				{
					title: '车站',
					key: 'station',
					width: 250
				},
				{
					title: '故障设备数',
					key: 'deviceNum',
					width: 183
				},
				{
					title: '设备总数',
					key: 'deviceSumNum',
					width: 200
				}
			],
			realTimeAlertTableColumns: [
				{
					title: '报警生产时间',
					key: 'alarmTime',
					width: 400
				},
				{
					title: '车站',
					key: 'alarmStation',
					width: 250
				},
				{
					title: '系统',
					key: 'alarmSystem',
					width: 250
				},
				{
					title: '优先级',
					key: 'rank',
					width: 100,
					format: '紧急1;高2;中3;低'
				},
				{
					title: '状态',
					key: 'alarmStatus',
					width: 250,
					format: '已恢复1;未恢复'
				},
				{
					title: '报警描述',
					key: 'alarmMessage',
					width: 700,
				},
			]
		}
	},
	methods: {
		initStationName() {
			this.$myRequest({
				url: '/devStatus/getStation'
			}).then(rep => {
				this.stationNameList = rep.result
			})
		},
		initSystemName() {
			this.$myRequest({
				url: '/devStatus/getSystems'
			}).then(rep => {
				this.systemNameList = rep.result
			})
		},
		initLevelList() {
			this.$myRequest({
				url: '/devStatus/getAlarmLevel'
			}).then(rep => {
				this.levelList = rep.result
			})
		},
		systemNameChange(e){
			if (e) {
				this.queryParam.alarmSystem = e.newVal.label
			} else {
				this.queryParam.alarmSystem = ''
			}
		},
		stationNameChange(e) {
			if (e) {
				this.queryParam.alarmStation = e.newVal.label
			} else {
				this.queryParam.alarmStation = ''
			}
		},
		levelChange(e) {
			if (e) {
				this.queryParam.rank = e.newVal.label
			} else {
				this.queryParam.rank = ''
			}
		},
		// ------------------日期选择器----------------------
		// 取消事件
		cancel(){
		    this.close()
		},
		// 确认事件
		sure(e){
			this.queryParam[this.targetInputData] = e.a + '-' + e.b + '-' + e.c
		    // 输出 { year: 100100,month: 3,day: 23}
		},
		// picker显示
		showPop(event, paramName){
			this.targetInputData = paramName
		    this.show = true
		},
		// 关闭picker
		close(){
		    this.show = false
		},
		
		// ------------------列表相关----------------------
		// 查询表单提交
		queryFormSubmit (e, currentPage, pageSize) {
			if(e){
				this.$refs.queryOptions.close()
			}
			if(currentPage && currentPage > 0){
				this.queryParam.pageNo = currentPage
				this.queryParam.pageSize = pageSize
			}
			this.$myRequest({
				url: '/alarm/allLineRealAlarm',
				data: this.queryParam,
				method: 'POST'
			}).then(rep => {
				this.realTimeAlertList = rep.data
				this.realTimeAlertTotal = rep.total
			})
		},
		//车站故障统计
		queryStationFault () {
			this.$myRequest({
				url: '/alarm/allLineStationFaultStatistics',
				method: 'GET'
			}).then(rep => {
				this.stationFaultList = rep.data
			})
		},
		
		//-------------------echarts图形-------------------------------
		initMaintainOption () {
			this.$myRequest({
				url: '/alarm/inportDeviceTop',
				method: 'GET'
			}).then(rep => {
				this.maintainOption = maintainOption(rep.data)
			})
		},
		initMajorOption () {
			this.$myRequest({
				url: '/alarm/indexGetAlarmByType',
				method: 'GET'
			}).then(rep => {
				let dataList = []
				let dataValueList = []
				let alarmGradingStation = rep.data;
				for(var i=0;i< alarmGradingStation.length;i++){
					dataList.push(alarmGradingStation[i].name);
					var map= new Map;
					map.name= alarmGradingStation[i].name;
					map.value= alarmGradingStation[i].value;
					dataValueList.push(map);
				}
				this.majorOption = majorOption(dataList,dataValueList)
			})
		},
		initLevelOption () {
			this.$myRequest({
				url: '/alarm/faultStatisticsAllLevels',
				method: 'GET'
			}).then(rep => {
				let dataList = []
				let dataValueList = []
				let faultStatisticsAllLevels = rep.data;
				for(var i=0;i< faultStatisticsAllLevels.length;i++){
					dataList.push( faultStatisticsAllLevels[i].name);
					var map= new Map;
					map.name= faultStatisticsAllLevels[i].name;
					map.value= faultStatisticsAllLevels[i].value;
					dataValueList.push(map);
				}
				this.levelOption = levelOption(dataList,dataValueList)
			})
		},
		
		//------------查询条件-----------------------
		showQueryOptions() {
			this.$refs.queryOptions.open()
		},
		drawerChange (e) {
			if(e){
				this.queryParam.startDate = ''
				this.queryParam.endDate = ''
				this.queryParam.alarmStation = ''
				this.queryParam.alarmSystem = ''
				this.queryParam.rank = ''
			}
		},
		pageChange (e) {
			this.queryFormSubmit(null,e.current,15)
		}
	},
	components: {
		Echarts,
		minPicker,
		minPopup
	},
	mounted () {
		this.initStationName()
		this.initSystemName()
		this.initLevelList()
		
		this.queryFormSubmit()
		this.queryStationFault()
		
		this.initMaintainOption()
		this.initMajorOption()
		this.initLevelOption()
	}
}
</script>

<style>
	.ec-canvas {
	        display: flex;
	        height: 100%;
	        flex: 1;
	    }
	
	.canvasView {
		width: 700upx;
		height: 650upx; 
	}
	
	.stationFaultTable {
		height: 650upx; 
		padding: 10upx;
	}
	
	.queryButton {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		padding: 0rpx 25rpx 25rpx;
		
		height: 10%;
		align-self: flex-end;
	}
</style>
